Skip to main content

Vikimap Elevate data model

Accedo Build Vikimap is a lightweight data model aimed to provide a minimal and easy to understand approach to configure our applications layouts. In order to enable these goals Vikimap should follow the next items:

Read more about the concept of Vikimap here.

Vikimap Service Client​

Elevate uses the @accedo/vdkweb-vikimap component provides a service which is responsible for retrieving the Vikimap entries (Menu, MenuItem, Page, Container and Item). It's a promise-based interface to support both asynchronous (e.g. Accedo One) and synchronous (local JSON) fetching of entries. This service is configured and exposed from the src/services/vikimap folder.

Example ModularPage​

import modules from '#/redux/modules';
const { vikimap: { actions, selectors } } = modules;

// Create a Vikimap page component
const ModularPage = ({ displayText, containers, template }) => {
  // Render the page based on page entry properties.
};

// Set up your component with Vikimap entry fetching
// by using withEntryLoad
export default withEntryLoad({
  loadAction: actions.fetchPage,
  stateSelector: selectors.getPageById
})(ModularPage);

Routing to your page:

// If routing to the ModularPage and providing the :id param
// it will automatically load the Vikimap entry data for your page
// In the router:
<Route path="/">
 <Route path=":id" component={ModularPage} />}
</Route>

Example VikimapMenu​

import modules from '../../redux/modules';
const { vikimap: { actions, selectors } } = modules;

// Create your Vikimap menu component
const VikimapMenu = ({ items, ...others }) => {
  // Render the menu based on menu entry properties.
};

// Set up your component with Vikimap entry fetching
// by using withEntryLoad
export default withEntryLoad({
  loadAction: actions.fetchMenu,
  stateSelector: selectors.getMenuById
})(VikimapMenu);

Example usage:

// If the entry ID is provided to the component
// it will automatically load the Vikimap entry data for it
<VikimapMenu id="575aa9c06d3e8901e8ba73af" />